<template>
  <el-container style="border-radius: 10px; border: 1px solid #b2b4b4; padding: 15px;">
    <el-main>
      <el-form ref="form" :model="form" label-width="100px"
               style="background-color:#F5F5F5 ; border: solid 1px #F5F5F5;">
        <el-form-item label="新闻标题：">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="新闻作者：">
          <el-input v-model="form.writer"></el-input>
        </el-form-item>
        <el-form-item label="投稿时间：">
          <el-col :span="11">
            <el-date-picker v-model="form.releaseTime" type="date" placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select v-model="form.department" placeholder="请选择部门">
            <el-option v-for="department in departments.data" :key="department.departmentId" :label="department.name" :value="department.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专题：">
          <el-select v-model="form.thematic" placeholder="请选择专题">
            <el-option v-for="thematic in thematics.data" :key="thematic.specialId" :label="thematic.name" :value="thematic.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目：">
          <el-select v-model="form.column" placeholder="请选择栏目">
          <el-option v-for="column in columns.data" :key="column.columnId" :label="column.name" :value="column.name">
          </el-option>>
          </el-select>
        </el-form-item>
        <el-form-item label="新闻内容：">
          <quill-editor ref="text" v-model="form.content" class="myQuillEditor" :options="editorOption"
                        style="height: 300px;"/>
        </el-form-item>
        <el-form-item style="margin-top: 100px;">
          <el-button type="primary" @click="onSubmit">投稿</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>

<script>
import { quillEditor, Quill } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import axios from 'axios'; // 引入axios库

Quill.register('modules/ImageExtend', ImageExtend)

export default {
  components: { quillEditor },
  data() {
    return {
      form: {
        articleId:'',
        name: '',
        writer: '',
        releaseTime: new Date(),
        department: null, // 初始化为一个对象
        thematic: '',
        column:'',
        type: [],
        content: ''
      },
      departments: [], // 存放部门列表数据
      thematics: [], //存放专题列表数据
      columns: [],//存放专栏列表数据
      picture: null,
      photo: '',
      newsCategoryId: 2,
      editorOption: {
        placeholder: '请输入正文',
        modules: {
          ImageExtend: {
            // 如果不作设置，即{}  则依然开启复制粘贴功能且以base64插入
            name: 'file', // 图片参数名
            loading: true,
            size: 10, // 可选参数 图片大小，单位为M，1M = 1024kb
            action: 'http://localhost:8090/files/upload',
            response: res => {
              console.log(res)
              // console.log('后端返回的图片 URL:', 'http://localhost:8090/files/' + res.data.flag);
              console.log(res.data);
              return 'http://localhost:8090/files/' + res.data;
            },
            headers: xhr => {
              console.log(xhr)
              // axios.defaults.withCredentials = true;
              // xhr.setRequestHeader('Cookie','NMTID=00OVM6QOJcTDVhqDUtvgSnd-5FBxLcAAAF9nTiDHg; JSESSIONID=5ACC52D29A2434E09450CB975E08C288')
            }, // 可选参数 设置请求头部
            sizeError: () => {
            }, // 图片超过大小的回调
            start: () => {
            }, // 可选参数 自定义开始上传触发事件
            end: () => {
            }, // 可选参数 自定义上传结束触发的事件，无论成功或者失败
            error: () => {
            }, // 可选参数 上传失败触发的事件
            success: () => {
            }, // 可选参数  上传成功触发的事件
            change: (xhr, formData) => {
              console.log(xhr, formData)
              // formData.append('token', 'myToken')
            } // 可选参数 每次选择图片触发，也可用来设置头部，但比headers多了一个参数，可设置formData
          },
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'], // 引用，代码块
              [{header: 1}, {header: 2}], // 标题，键值对的形式；1、2表示字体大小
              [{list: 'ordered'}, {list: 'bullet'}], // 列表
              [{script: 'sub'}, {script: 'super'}], // 上下标
              [{indent: '-1'}, {indent: '+1'}], // 缩进
              [{direction: 'rtl'}], // 文本方向
              [{size: ['small', false, 'large', 'huge']}], // 字体大小
              [{header: [1, 2, 3, 4, 5, 6, false]}], // 几级标题
              [{color: []}, {background: []}], // 字体颜色，字体背景颜色
              [{font: []}], // 字体
              [{align: []}], // 对齐方式
              ['clean'], // 清除字体样式
              ['image'] // 上传图片、上传视频
            ],
            handlers: {
              image: function () {
                // 劫持原来的图片点击按钮事件
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }, // 编辑器新闻对象
      fileList: []
    }
  },

  mounted() {
    // 页面加载时获取部门列表数据
    this.fetchDepartments();
    //页面加载时获取专题列表数据
    this.fetchThematics();
    this.fetchColumns();
  },
  methods: {
    // 获取部门列表数据的方法
    fetchDepartments() {
      axios.get('/departments/getAll')
          .then(response => {
            if (response.data) {
              console.log('部门数据获取成功:', response.data);
              this.departments = response.data;
            } else {
              console.log('部门数据为空或未成功获取');
            }
          })
          .catch(error => {
            console.error('获取部门数据时出错:', error);
          });
    },
    // 获取专栏列表数据的方法
    fetchColumns() {
      axios.get('/columns/getAll')
          .then(response => {
            if (response.data) {
              console.log('所属专栏数据获取成功:', response.data);
              this.columns = response.data;
            } else {
              console.log('所属专栏数据为空或未成功获取');
            }
          })
          .catch(error => {
            console.error('获取所属专栏数据时出错:', error);
          });
    },

    // 获取专题列表数据的方法
    fetchThematics(){
      axios.get('/zhuantis/getAll')
          .then(response => {
        if(response.data){
          console.log('专题数据获取成功', response.data);
          this.thematics = response.data;
        }else {
          console.log('专题数据为空或未成功获取');
        }
      })
          .catch(error => {
            console.log('获取专题数据时出错: ',error);
          })
    },



    // 提交表单的方法，根据具体需求编写
    onSubmit() {
      // 步骤1：验证表单数据
      if (!this.form) {
        console.log('表单数据不合法')
        return; // 如果表单数据不合法，停止提交
      }
      console.log('数据合法')
      // 步骤2：构造提交的数据对象
      console.log(this.getDepartmentIdByName(this.form.department))
      const formData = {
        topic: this.form.name,
        author: this.form.writer,
        subTime: this.form.releaseTime,
        departmentId: this.getDepartmentIdByName(this.form.department),
        specialId: this.getThematicByName(this.form.thematic),
        columnId: this.getColumnByName(this.form.column),
        content: this.form.content

      };

      // 步骤3：发送请求给后端
      axios.post('/article/add', formData)
          .then(response => {
            // 步骤4：处理后端的响应
            console.log('提交成功:', response.data);
            // 可以根据后端返回的数据执行相应的操作，比如显示成功消息、重定向到其他页面等
          })
          .catch(error => {
            console.error('提交失败:', error);
            // 可以在提交失败时显示错误消息给用户
          });
      console.log("部门id是这个",formData.departmentId)
      console.log("专题的id是这个",formData.specialId)
      console.log("栏目的id是这个",formData.columnId)
      console.log("新闻标题为",formData.topic)
      console.log("作者为",formData.author)
      console.log("内容为",formData.content)
      console.log("投稿时间为",formData.subTime)
    },


    validateForm() {
      // 在这里编写表单验证逻辑，确保必填字段已填写，并且数据格式正确
      // 如果表单验证失败，可以在这里返回 false，并在提交逻辑中处理
    },

    getDepartmentIdByName(name) {
      // 根据部门名字获取对应的部门 ID
      const department = this.departments.data.find(department => department.name === name);
      return department ? department.departmentId : null;
      // const department = this.departments.forEach(i=> {
      //   i.find(department => department.name === name);
      // })

    },
    //根据专题名获取专题id
    getThematicByName(name) {
      const thematic = this.thematics.data.find(thematic => thematic.name === name);
      return thematic ? thematic.specialId : null;
    },
    //根据栏目名获取栏目id
    getColumnByName(name) {
      const column = this.columns.data.find(column => column.name === name)
      return column ? column.columnId : null;
    },
  }
}
</script>
<style>
.el-form-item {
  margin: 15px;
}
</style>
